<style lang="scss" src="./scss/header.scss"></style>

<template>
  <section class="mod-header">
    <el-input
      v-model="title"
      placeholder="请输入..."
      size="large"
      @keyup.enter="add"
    ></el-input>
  </section>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  props: {
    addTodo: {
      type: Function,
      required: true, //必须
    },
  },
  setup(props) {
    // console.log(props);
    const title = ref("");
    // 回车事件的回调函数，用来添加数据
    const add = () => {
      // 获取文本框的数据，并且判断不为空
      const text = title.value;
      if (!text.trim()) return;
      // 此时有数据，创建一个todo对象
      const todo = {
        id: Date.now(),
        title: text,
        isCompleted: false,
      };
      // 调用addTodo的方法
      props.addTodo(todo);
      // 清空文本框
      title.value = "";
    };
    return {
      title,
      add,
    };
  },
});
</script>
